<template>
  <div class="pages">
    <div class="chanicon">

    </div>
    <div class="tetxtwebs">银盛助手</div>

    <div class="inbtebsd">
      <div class="phoneshou">
        <div class="iconfl">
          <img src="../../../static/images/icon-login-phone.png" alt="">
        </div>
        <div class="inputer">
          <input type="number" v-model="phone" placeholder="请输入手机号码">
        </div>
      </div>

      <div class="phoneshou codes">
        <div class="iconfl">
          <img src="../../../static/images/icon-login-code.png" alt="">
        </div>
        <div class="inputer">
          <div class="zuobians">
            <input type="number" v-model="code" placeholder="请输入验证码">
          </div>
          <van-button plain :loading="codestype" :disabled="codestype" v-if="codeShow" type="info" class="youbiande" loading-text="发送中..." block @click="getPhoneCodeqianyi()">获取验证码</van-button>
          <!-- <div v-if="codeShow" @click="getPhoneCode()" class="youbiande">获取验证码</div> -->
          <van-button plain v-if="!codeShow" type="info" class="youbiande" block>{{ count }}秒后重试</van-button>
          <!-- <div v-if="!codeShow" class="youbiande">{{count}}秒后重试</div> -->
        </div>
      </div>

      <div class="password_login" @click="Passwordlogin()">使用密码登录</div>

      <!-- <div class="login_deng">登录</div> -->
      <van-button plain :loading="typelio" :disabled="typelio" type="info" class="intgebv" loading-text="登录中..." block @click="liogining()">登录</van-button>

      <div class="inttebs">
        <div class="intbvdbf">
          <van-checkbox v-model="checked" shape="square" icon-size="20px"></van-checkbox>
        </div>
        <div class="trtsbbds">
          <span>我已阅读并同意</span>
          <span>《银盛助手用户协议》</span>
          <span>和</span>
          <span>《银盛助手隐私政策》</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import qs from 'qs'
import Vue from 'vue'
import api from '../../api/logIn'

Vue.prototype.$api = api
export default {
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#fff')
  },
  beforeDestroy() {
    document.querySelector('body').setAttribute('style', '')
  },
  data() {
    return {
      typelio: false,
      checked: true,

      codestype: false,
      codeShow: true,  //判断显示隐藏
      count: '',     //显示时的文字内容
      timer: null,

      phone: '',//手机号
      code: ''
    }
  },
  methods: {
    // 登录
    liogining() {
      if (this.phone === '') {
        Toast('请输入手机号')
        return
      }
      if (this.code === '') {
        Toast('请输入密码')
        return
      }
      if (!this.checked) {
        Toast('请勾选协议条款')
        return
      }
      this.typelio = true
      const params = {
        username: this.phone,
        password: this.code
      }

      this.$api.codelogin(qs.stringify(params)).then((res) => {
        if (res.status === '0000') {
          localStorage.setItem('mytoken', res.ownerId)
          localStorage.setItem('businesses', JSON.stringify(res.payload.agency.businesses))
          Toast('登录成功')
          setTimeout(() => {
            this.typelio = false
            this.$router.push({ name: 'Index' })
          }, 1000)
        } else {
          Toast(res.describe)
          setTimeout(() => {
            this.typelio = false
          }, 1000)
        }
      }).catch((error) => {
        console.log(error)
      })

      setTimeout(() => {
        this.typelio = false
      }, 1000)
    },


    Passwordlogin() {
      this.$router.push({ name: 'Passwordlogin' })
    },
    getPhoneCodeqianyi() {
      if (this.phone == '') {
        Toast('请输入手机号码')
        return
      }
      this.codestype = true
      setTimeout(() => {
        this.codestype = false
        this.getPhoneCode()
      }, 1000)
    },
    getPhoneCode() {
      const params = {
        phoneNo: this.phone,//手机号
        type: 'LOGIN'//短信类型.
      }
      this.$api.sendSms(params).then((res) => {
        console.log(res)
        if (res.status == '0000') {
          //点击获取验证码
          const TIME_COUNT = 60  //倒计时60秒
          if (!this.timer) {
            this.count = TIME_COUNT
            this.codeShow = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.codeShow = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          Toast(res.describe)
        }
      })


    }
  }
}
</script>

<style scoped>
.pages {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.chanicon {
  border-radius: 100px;
  background: #C4C4C4;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  margin-top: 36px;
}

.chanicon > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tetxtwebs {
  margin-top: 16px;
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 24px;
  letter-spacing: 0px;
}

.inbtebsd {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
  margin-top: 56px;
}

.phoneshou {
  width: 100%;
  padding: 8.5px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #BDBDBD;
  display: flex;
  align-items: center;
}

.iconfl {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

.iconfl > img {
  width: 100%;
  height: 100%;
}

.inputer {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inputer > input {
  width: 100%;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
  border: 0;
}

.codes {
  margin-top: 42.5px;
}

.zuobians {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zuobians > input {
  width: 100%;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
  border: 0;
}

.youbiande {
  width: 88px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #3288FF;
  color: #3288FF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.password_login {
  width: 100%;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3288FF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 15px;
  letter-spacing: 0px;
}

.login_deng {
  width: 100%;
  height: 48px;
  margin-top: 25px;
  border-radius: 4px;
  border: 1px solid #3288FF;
  color: #3288FF;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 16px;
  letter-spacing: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intgebv {
  margin-top: 25px;
}

.inttebs {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.trtsbbds {
  width: 90%;
  /* display: flex; */
  text-align: center;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 12px;
  letter-spacing: 0px;
  display: inline-block;
}

.trtsbbds > div {
  display: inline-block;
}

button {
  padding: 0 !important;
}
</style>
